<template>
    <div class="text">
       <div :style="`text-align:${options.textAlign || 'center'};font-size:${options.fontSize/2 ||12}px; line-height:${(options.fontSize/2- 0 + 8) ||20}px;font-family:${options.textFontFamily || 'Microsoft YaHei' };color:${options.textColor || '#666666'};background:${options.bgColor || '#FFFFFF'};margin-top:${options.paddingTop/2}px;margin-bottom:${options.paddingBottom/2}px`">
            <p v-if='!options.textContent'>请在右侧输入您的文本内容</p> 
            <p v-else v-html='options.textContent'></p>
       </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            options:{}
        }
    },
    props:{
        option:{
            type:Object
        }
    },
    methods:{
        getText(val){
            if(!val){
                return 
            }
            let text =val.replace(/\n/g, "<br/>");
            text = text.replace(/\s/g,'&nbsp');
            this.options.textContent = text;
        },
    },
    watch:{
        option:function(val){
            this.options =JSON.parse(JSON.stringify(val));
            this.getText(this.options.textContent );

            // this.options.textContent  = this.options.textContent ? this.options.textContent.replace(/\s/g,'&nbsp') :"";
        }
    },
    mounted(){
        this.options =JSON.parse(JSON.stringify(this.option));
        this.getText(this.options.textContent );
    }
}
</script>
<style lang="less" scoped>
    .text{
        width:100%;
        height:auto;
        min-height:30px;
        box-sizing: border-box;
        line-height:20px;
        word-break: break-word;
        overflow: hidden;
        div{
            padding:5px 12px;
        }
        // line-height:100px;
    }
</style>